import React from "react";
import { Card } from "antd";
import ReactECharts from "echarts-for-react";

function Visualization() {
  // 配置图表的选项
  const getOption = () => ({
    title: {
      text: "用户增长趋势",
      left: "center",
    },
    tooltip: {
      trigger: "axis",
    },
    xAxis: {
      type: "category",
      data: ["1月", "2月", "3月", "4月", "5月", "6月"],
    },
    yAxis: {
      type: "value",
    },
    series: [
      {
        name: "用户数",
        type: "line",
        data: [120, 200, 150, 80, 70, 110],
        smooth: true,
      },
    ],
  });

  return (
    <div style={{ padding: "20px" }}>
      <Card
        title="可视化数据分析"
        variant="outlined"
        style={{ marginBottom: "20px" }}
      >
        <p>这里展示了平台的用户增长趋势。</p>
      </Card>
      <Card>
        <ReactECharts option={getOption()} style={{ height: "400px" }} />
      </Card>
    </div>
  );
}

export default Visualization;
